<template>
	<view class="coupon-content">
		<view class="tab-view">
			<u-tabs :list="list" active-color="#141414" height="100" bar-width="24" font-size="30" inactive-color="#757575"
			 :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="coupon-list">
			<view class="coupon-item" v-for="(item,index) in couponList" :key="index" :class="[current == 0 ? '':'coupon-item-grey']">
				<view class="coupon-img" :class="[current == 0 ? 'coupon-img-black':'coupon-img-grey']">
					<view class="coupon-amount">
						<block v-if="item.coupon.type==2">
							<view>
								{{item.coupon.discount}}
								<text>折</text>
							</view>
						</block>
						<block v-if="item.coupon.type==1">
							<text>¥</text>
							{{item.coupon.money}}
						</block>
					</view>
					<view class="explain" v-if="item.coupon.type==1">满{{item.coupon.satisfy_money}}可用</view>
				</view>
				<view class="text-info">
					<view class="type" :class="[current == 0 ? '':'type-grey']">{{item.coupon.coupon_name}}</view>
					<view class="time">有效期：{{item.add_time}}-{{item.end_time}}</view>
				</view>
			</view>
		</view>
		<pt-nothing text="暂无优惠券" :fixed="true" v-if="couponList.length == 0" icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>

		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-else />
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 0,
				loadmore: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				current: 0,
				list: [{
					name: '待使用(0)'
				}, {
					name: '已过期(0)'
				}],
				couponList: []
			};
		},
		onLoad() {
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			this.init()
			this.getNumber(3)
		},
		methods: {
			init() {
				let data = {
					page: this.page,
					limit: 10,
					user_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).user_id : '',
					store_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).store_id : 1,
					status: this.current == 1 ? 3 : 1
				}
				this.$u.apiWei.CouponList(data).then(res => {
					if (res.datas.length) {
						res.datas.forEach((item) => {
							this.couponList.push(item)
						})
						if (this.current == 0) this.list[0].name = '待使用(' + res.datas[0].counts + ')'
						if (this.current == 1) this.list[1].name = '已过期(' + res.datas[0].counts + ')'
					}
					if (res.datas.length == 10) {
						this.loadmore = true
					} else {
						this.loadmore = false
					}
				})
			},
			getNumber(status) {
				let data = {
					page: 0,
					limit: 10,
					user_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).user_id : '',
					store_id: uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')).store_id : 1,
					status: status
				}
				this.$u.apiWei.CouponList(data).then(res => {
					if (res.datas.length) {
						this.list[1].name = '已过期(' + res.datas[0].counts + ')'
					}
				})
			},
			change(index) {
				this.current = index;
				this.page = 0
				this.couponList = []
				this.init()
			},
			onReachBottom() {
				this.status = 'loading';
				if (!this.loadmore) {
					this.status = 'nomore';
					return;
				}
				this.page++
				setTimeout(() => {
					this.status = 'nomore';
				}, 2000)
				this.init()
			},
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
				this.page = 0
				this.couponList = []
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.coupon-content {
		.tab-view {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
		}

		.coupon-list {
			padding: 100rpx 30rpx 30rpx 30rpx;

			.coupon-item-grey {
				background-color: #FCFCFD !important;
			}

			.coupon-item {
				margin-top: 60rpx;
				display: flex;
				background-color: #FAFAFC;
				border-radius: 6rpx;
				overflow: hidden;

				.coupon-img {
					padding: 34rpx 0;
					width: 200rpx;
					height: 150rpx;
					text-align: center;
					color: #fff;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.coupon-amount {
						font-size: 28rpx;
						font-weight: bold;
						text {
							font-size: 20rpx;
						}
					}

					.explain {
						margin-top: 16rpx;
						font-size: 20rpx;
					}
				}

				.coupon-img-black {
					background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-11-15/20211115/8c74ae6ecb317bbc0373e069c6bf1fc8.png);
					background-size: 100% 100%;
				}

				.coupon-img-grey {
					background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-11-15/20211115/36572f747f5c8d64f3bcf55d046d5fa3.png);
					background-size: 100% 100%;
				}

				.type-grey {
					color: #909090 !important;
				}


				.text-info {
					flex: 1;
					padding: 34rpx 40rpx;

					.type {
						font-size: 32rpx;
						font-weight: bold;
						color: #222222;
					}

					.time {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}

			}
		}
	}
</style>
